<template>
	<view class="body">
		<view class="header-box">
			<!-- 顶部 -->
			<view class="one">
				<view class="logo">
					<view class="logo-box">
						<img  :src="info.logo" alt="">
					</view>
					<view class="title-box">
						<view v-if="!info.name" class="smaill-name">
							加载中
						</view>
						<view v-else class="smaill-name">
							{{info.name}}
						</view>
						<view class="smaill-info">
							{{ info.desc ? info.desc : "暂无介绍"}}
						</view>
					</view>
				</view>
<!-- 				<view class="follow" @click="onAdd">
					<img src="https://image.hzwltb69.com/app/imgs/derivative/follow.png" alt="">
					{{ isFollow ? '已关注' : '关注'}}
				</view> -->
			</view>
			<!-- 推品 -->
			<view class="two">
				<view class="info" @click="onScollDetail">
<!-- 					<view class="">
						推品名称
					</view>
					<i></i>
					<view class="">
						推品详细信息
					</view> -->
					<swiper
					class="swiper"
					:vertical="true"
					:autoplay="true"
					:interval="2000"
					:duration="500"
					@change="change"
					>
					<swiper-item class="items" v-for="item,index in swiperList" :key="index">
						<view class="infos">
							{{item}}
						</view>
					</swiper-item>
					</swiper>
				</view>
				<view class="arrow" @click="onScollDetail">
					<img src="https://image.hzwltb69.com/app/imgs/derivative/mystoreright.png" alt="">
				</view>
			</view>
		</view>
		<view class="one-box">
			<view class="Recommend-box">
				<view class="Recommend-title">
					<view class="bigtitle">
						主推商品
					</view>
					<i></i>
					<view class="">
						商城补贴季
					</view>
				</view>
				<view class="goods-list">
					<view v-for="item,index in topList" class="Recommend-card">
						<view class="goodsx">
							<img :src="item.product.large" alt="">
						</view>
						<view class="goods-name">
							{{item.product.name}}
						</view>
						<view class="goods-go" @click="todetail(item.product.id)">
							点击进入
						</view>
					</view>
				</view>
			</view>
			<view class="list-box">
				<view
				class="info-card"
				v-for="item,index in goodsList"
				:key="index"
				:class="{'u-left':index % 2 !== 0}"
				@click="todetail(item.product.id)"
				>
					<view class="img-box">
						<img :src="item.product.large" alt="">
					</view>
					<view class="footer-box">
<!-- 						<view class="pirce">
							<img src="https://image.hzwltb69.com/app/imgs/derivative/hotpirce.png" alt="">
						<view class="all">
							{{((item.product.price - item.product.cost) * rebate/100).toFixed(2)}}
						</view> -->
<!-- 						<view class="did">
							佣金比例35%
						</view> -->
						<!-- </view> -->
						<view class="" style="color:#fa3534">
							<span style="margin-right: 5rpx;font-size: 25rpx;">补贴</span>
							{{rebate}}%
						</view>
						<view class="goods-name">
							{{item.product.name}}
						</view>
						<view class="goods-price">
							￥
							<view style="font-size: 30rpx;">{{item.product.price }}</view>
							<view style="margin-left: 5rpx;font-size: 25rpx;margin-top: 5rpx;">售价</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 小店所有人id 这个页面需要请求接口后拿到上级小店id
				ownerId: '',
				goodsList: [],
				info:{
					name: '',
					logo: '',
					desc: '加载中',
				},
				rebate: null,
				// 小店id 需要请求后拿到
				smaillId: '',
				// 消费者id
				memberId: uni.getStorageSync('UId') || 0,
				// 主推商品
				topList: [],
				// swiperList
				swiperList: [],
				scollId: null,
				// 是否关注
				isFollow: false,
			}
		},
		created() {
			// console.log(this.$Route.query);
			// this.ownerId = this.$Route.query.ownerId
			// this.getList()
			// this.getRebate()
			this.hasUserGet()
		},
		methods:{
			hasUserGet() {
							let that = this;
							// this.isAdding=true
							that.$http('goods.getDistributor', {
								UId: uni.getStorageSync("UId")
							}).then(res => {
							 console.log(res);
							 // 请求接口 拿到当前用户上级的ID 
							 console.log(res.derivative[0].member.id);
							 that.ownerId = res.derivative[0].member.id
							 that.getList()
							});
						},
			getList(){
				let that = this;
				that.$http('goods.getbyOnwer', {
					// 小店ID 
					UId: this.ownerId,
					// 用户id
					memberId: this.memberId
				}).then(res =>{
					that.info = res.derivative[0]
					that.goodsList = res.list
					that.topList = res.tops
					that.topList.forEach(item =>{
						that.swiperList.push(item.product.name)
					})
					this.scollId = that.topList[0].product.id
					this.isFollow = res.isFavorite
					this.smaillId = res.derivative[0].id
					that.rebate = res.rebate
				})
			},
			// 获取当前的佣金比例
			// getRebate(){
			// 	let that = this
			// 	that.$http('goods.tuanduilist', {
			// 		UId: this.ownerId,
			// 		page: 1
			// 	})
			// 	.then(res => {
			// 		that.rebate = res.rebate[0]
			// 	})
			// },
			// 前往商品详情
			todetail(id) {
				
				this.$Router.push({
					path: '/pages/goods/ccdetail',
					query: {
						id: id,
						ownerId: this.ownerId
					}
				})
			},
			// 滚动切换
			change(e){
				// console.log(e.detail.current);
				this.scollId = this.topList[e.detail.current].product.id
			},
			// 滚动栏跳转
			onScollDetail(){
				this.todetail(this.scollId)
			},
			// 关注
			onAdd(){
				let that = this
				if(!uni.getStorageSync('UId')){
					uni.showToast({
						icon:'error',
						title:'用户未登录'
					})
					return
				}
				that.$http('goods.smailladd',{
					UId: uni.getStorageSync('UId'),
					derivativeId: that.smaillId
				})
				.then(res =>{
					console.log(res);
					uni.showToast({
						icon:'success',
						title: that.isFollow ? '取消关注成功' : '关注成功'
					})
					that.isFollow = !that.isFollow
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	$white:#fff;
	.body{
		background-color: #f1f1f1;
		.header-box{
			width: 100%;
			height: 210rpx;
			background: url('https://image.hzwltb69.com/app/imgs/derivative/shoreBgc.png') no-repeat;
			background-size: 100% 100%;
			padding: 15rpx;
			.one{
				width: 100%;
				height: 130rpx;
				// background-color: pink;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.logo{
					display: flex;
					.logo-box{
						width: 90rpx;
						height: 90rpx;
						// background-color: skyblue;
						border-radius: 50%;
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
						}
					}
				}
				.title-box{
					margin-left: 20rpx;
					.smaill-name{
						font-size: 35rpx;
						font-weight: 600;
						margin-top: 0rpx;
					}
					.smaill-info{
						margin-top: 0rpx;
					}
				}
			    .follow{
					font-size: 25rpx;
					width: 130rpx;
					height: 60rpx;
					background-color: #ef8742;
					color: #fff;
					border-radius: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					img{
						width: 20rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
				}
			}
			.two{
				display: flex;
				justify-content: space-between;
				color: #896752;
				.info{
					width: 600rpx !important;
					display: flex;
				}
				.arrow{
					img{
						width: 15rpx;
						height: 20rpx;
					}
				}
			}
		}
		.one-box{
			padding: 20rpx;
			.Recommend-box{
				width: 100%;
				height: 420rpx;
				// background-color: pink;
				background: url('https://image.hzwltb69.com/app/imgs/derivative/tuibgc.png') no-repeat;
				background-size: 100% 100%;
				padding: 15rpx;
				.Recommend-title{
					height: 70rpx;
					line-height: 70rpx;
					display: flex;
					.bigtitle{
						font-weight: 600;
					}
					i{
						width: 1rpx;
						height: 30rpx;
						border-right: 1rpx solid black;
						margin-top: 20rpx;
						margin-left: 20rpx;
						margin-right: 20rpx;
					}
				}
				.goods-list{
					display: flex;
					justify-content: space-around;
					align-items: center;
					.Recommend-card{
						width: 220rpx;
						height: 325rpx;
						background-color: #fff;
						display: flex;
						flex-direction: column;
						// justify-content: center;
						align-items: center;
						border-radius: 25rpx;
						overflow: hidden;
						.goodsx{
							width: 100%;
							height: 200rpx;
							// background-color: pink;
							img{
								width: 100%;
								height: 100%;
							}
						}
						.goods-name{
							width: 200rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-top: 15rpx;
						}
						.goods-go{
							margin-top: 10rpx;
							width: 90%;
							height: 50rpx;
							background-color: #f8cbac;
							border-radius: 15rpx;
							text-align: center;
							color: #d25246;
							line-height: 50rpx;
						}
					}
				}
			}
			.list-box{
				margin-top: 20rpx;
				width: 100%;
				// height: 300rpx;
				// background-color: pink;
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-around;
				.info-card{
					width: 347rpx;
					height: 450rpx;
					background-color: $white;
					margin-bottom: 15rpx;
					// margin-left: 20rpx;
					// margin-left: 13rpx;
					border-radius: 25rpx;
					overflow: hidden;
					.img-box{
						width: 100%;
						height: 300rpx;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.footer-box{
						padding: 10rpx;
						.pirce{
							display: flex;
							img{
								width: 45rpx;
								height: 35rpx;
							}
							.all{
								color: #f42f2f;
								margin-left: 10rpx;
								margin-right: 10rpx;
							}
							.did{
								color: #c4c4c4;
								font-size: 24rpx;
								margin-top: 5rpx;
							}
						}
						.goods-name{
							margin-top: 10rpx;
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							// overflow-wrap: break-word;
						}
						.goods-price{
							display: flex;
							margin-top: 8rpx;
							color: #e57725;
						}
					}
				}
			}
		}
	}
	.u-left{
		margin-left: 21rpx;
	}
	// 滚动
	.swiper{
		height: 50rpx;
		width: 100%;
		line-height: 50rpx;
		overflow: hidden;
	}
	.items{
		display: flex;
		.infos{
			width: 600rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-left: 30rpx;
		}
	}
</style>